<template>
  <!-- <div class="box"> -->
    <p class="title">{{title}}</p>
    <ul>
      <li @click="goDetail" class="item" v-for="item in goodsList" :key="item.goodsid">
        <img :src="item.goodNorms[0].photo" alt />
        <div class="bottom">
          <p>{{item.discountprice}}币</p>
          <van-icon class="icon" name="add" />
        </div>
      </li>
    </ul>
  <!-- </div> -->
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
defineProps({
  title: {
    type: String,
    default: "家居"
  },
  goodsList: {
    type: Array,
    default: [
      {
        id: 1,
        url: "https://t7.baidu.com/it/u=3624649723,387536556&fm=193&f=GIF",
        price: 200
      },
      {
        id: 2,
        url: "https://t7.baidu.com/it/u=3624649723,387536556&fm=193&f=GIF",
        price: 200
      },
      {
        id: 3,
        url: "https://t7.baidu.com/it/u=3624649723,387536556&fm=193&f=GIF",
        price: 200
      },
      {
        id: 4,
        url: "https://t7.baidu.com/it/u=3624649723,387536556&fm=193&f=GIF",
        price: 200
      },
      {
        id: 5,
        url: "https://t7.baidu.com/it/u=3624649723,387536556&fm=193&f=GIF",
        price: 200
      },
      {
        id: 6,
        url: "https://t7.baidu.com/it/u=3624649723,387536556&fm=193&f=GIF",
        price: 200
      }
    ]
  }
});

function goDetail() {
  router.push("/ShopDetail");
}
</script>

<style scoped>
.title {
  font-size: 4.8vw;
  border-left: 0.8vw solid #f65e6f;
  text-indent: 2.667vw;
}
img {
  width: 18.667vw;
  height: 18.667vw;
  margin-bottom: 2vw;
  border-radius: 2.667vw;
  box-shadow: 1.333vw 1.333vw 1.333vw #ccc;
}
ul {
  display: flex;
  flex-wrap: wrap;
  padding: 1.333vw;
}
.item {
  width: 18.667vw;
  margin: 2.667vw 0;
  margin-left: 2.667vw;
}
.bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom > p {
  margin-right: 2.667vw;
  font-size: 2.667vw;
}
.bottom > .icon {
  color: #f65e6f;
}
</style>